<template>
  <div id="now">
    <ul>
      <li v-for="item in nowPlayData" :key="item.id">
        <div class="first"><img :src="item.img" alt="" /></div>
        <div class="second">
          <p class="title">{{item.title}}</p>
          <p><span class="font-color">观众评</span><span class="score">{{item.score}}</span></p>
          <p class="actors font-color">
            {{item.actors}}
          </p>
          <p class="font-color">{{item.nums}}</p>
        </div>
        <div class="third"><button>购票</button></div>
      </li>
    </ul>
  </div>
</template>
<script>
export default {
    name:'Now',
   methods:{
   getNowPlayData(){
     var that=this;
     axios.get('/mock/nowPlayData.json')
  .then(function (response) {
    console.log(response);
    if(response.status == 200){
      if(response.data && response.data.nowPlayData){
        that.nowPlayData=response.data.nowPlayData;
      }
    }
  })
  .catch(function (error) {
    console.log(error);
  })
   }
  },
  created(){
    this.getNowPlayData();
  },
  data() {
    return {
      nowPlayData: []
    };
  }
}
</script>
<style scoped>
#now{
    width: 100%;
    padding-bottom: 50px;
}
img {
  width: 80px;
}
div {
  float: left;
}
.first {
  width: 25%;
  margin-bottom: 8px;
}
.second {
  width: 55%;
}
.actors {
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.third {
  width: 15%;
  text-align: center;
  line-height: 75px;
}
li {
  overflow: hidden;
  margin: 10px;
  border-bottom:1px solid #ccc ;
}
.title {
  font-size: 18px;
  font-weight: bold;
}
p {
  line-height: 25px;
}
.font-color{
    color:#666;
}
.score{
    color: #F90;
    margin-left: 5px;
    font-weight: bold;

}
button{
  background: #E54847;
  width: 45px;
  height: 30px;
  border: none;
  color: white;
  border-radius: 5px;
  
}
</style>